import React from 'react'
import { Table, Input, Popconfirm } from 'antd';

class EditableCell extends React.Component {
    state = {
      value: this.props.value,
      editable: this.props.editable || false,
    }
    componentWillReceiveProps(nextProps) {
      if (nextProps.editable !== this.state.editable) {
        this.setState({ editable: nextProps.editable });
        if (nextProps.editable) {
          this.cacheValue = this.state.value;
        }
      }
      if (nextProps.status && nextProps.status !== this.props.status) {
        if (nextProps.status === 'save') {
          this.props.onChange(this.state.value);
        } else if (nextProps.status === 'cancel') {
          this.setState({ value: this.cacheValue });
          this.props.onChange(this.cacheValue);
        }
      }
    }
    shouldComponentUpdate(nextProps, nextState) {
      return nextProps.editable !== this.state.editable ||
             nextState.value !== this.state.value;
    }
    handleChange(e) {
      const value = e.target.value;
      this.setState({ value });
    }
    render() {
      const { value, editable } = this.state;
      return (
        <div>
          {
            editable ?
              <div>
                <Input
                  value={value}
                  onChange={e => this.handleChange(e)}
                />
              </div>
              :
              <div className="editable-row-text">
                {value.toString() || ' '}
              </div>
          }
        </div>
      );
    }
  }

class TableDemo extends React.Component{
    constructor(props){
        super(props)
        this.columns = [{
            title: '',
            dataIndex: 'id',
            width:'10%'
          }, {
            title: '动作名称1',
            dataIndex: 's1',
            width:'10%'
          }, {
            title: '动作名称',
            dataIndex: 'display_name',
            width:'10%'
          }, {
            title: '英文/拼音',
            dataIndex: 'action_name',
            width:'10%'
          }, {
            title: '是否受限',
            dataIndex: 'restricted',
            width:'10%'
          }, {
            title: '排序',
            dataIndex: 'display_order',
            width:'10%'
          }, {
            title: '方法',
            dataIndex: 'request_method',
            width:'10%'
          }, {
            title: '访问路径',
            dataIndex: 'request_path',
            width:'10%'
          }, {
          title: '描述',
          dataIndex: 'description',
          width:'10%'
        }, {
            title: 'operation',
            dataIndex: 'operation',
            render: (text, record, index) => {
              const { editable } = this.state.data[index].name;
              return (
                <div className="editable-row-operations">
                  {
                    editable ?
                      <span>
                        <a onClick={() => this.editDone(index, 'save')}>Save</a>
                        <Popconfirm title="Sure to cancel?" onConfirm={() => this.editDone(index, 'cancel')}>
                          <a>Cancel</a>
                        </Popconfirm>
                      </span>
                      :
                      <span>
                        <a onClick={() => this.edit(index)}>Edit</a>
                      </span>
                  }
                </div>
              );
            },
          }];
          this.state = {
            data: [{
              key: '0',
              name: {
                editable: false,
                value: 'Edward King 0',
              },
              age: {
                editable: false,
                value: '32',
              },
              address: {
                value: 'London, Park Lane no. 0',
              },
            }],
          };
        }
        renderColumns(data, index, key, text) {
          const { editable, status } = data[index][key];
          if (typeof editable === 'undefined') {
            return text;
          }
          return (<EditableCell
            editable={editable}
            value={text}
            onChange={value => this.handleChange(key, index, value)}
            status={status}
          />);
        }
        handleChange(key, index, value) {
          const { data } = this.state;
          data[index][key].value = value;
          this.setState({ data });
        }
        edit(index) {
          const { data } = this.state;
          Object.keys(data[index]).forEach((item) => {
            if (data[index][item] && typeof data[index][item].editable !== 'undefined') {
              data[index][item].editable = true;
            }
          });
          this.setState({ data });
        }
        editDone(index, type) {
          const { data } = this.state;
          Object.keys(data[index]).forEach((item) => {
            if (data[index][item] && typeof data[index][item].editable !== 'undefined') {
              data[index][item].editable = false;
              data[index][item].status = type;
            }
          });
          this.setState({ data }, () => {
            Object.keys(data[index]).forEach((item) => {
              if (data[index][item] && typeof data[index][item].editable !== 'undefined') {
                delete data[index][item].status;
              }
            });
          });
        }
        render() {
          const { data } = this.state;
          const dataSource = data.map((item) => {
            const obj = {};
            Object.keys(item).forEach((key) => {
              obj[key] = key === 'key' ? item[key] : item[key].value;
            });
            return obj;
          });
          const columns = this.columns;
          return <Table
                    pagination={false} 
                    bordered 
                    dataSource={dataSource} 
                    columns={columns} 
                    
                    />;
        }
}

export default TableDemo